import React, { Component } from 'react'
import { connect } from 'dva';
import { Button, message, Row, Col } from 'antd';

import ListItem from "@/components/ListCard";
import { DividerItem } from '@/components/DividerItem';

let Keys = [
  { key: 'title', name: '标题' },
  { key: 'creatorName', name: '创建人' },
  { key: 'positionNameList', name: '接收角色' },
  { key: 'statusName', name: '状态' },
  // { key: 'content', name: '内容' },
  { key: 'createTime', name: '创建时间' },
  // { key: 'sendTime', name: '发送时间' },
  { key: 'timingSendTime', name: '定时发布时间' }
];

const isEnable = {
  '0': '否',
  '1': '是'
};

interface Props {
  dispatch?: Function,
  details: {
    id: number,
    companyId: number,
    content: string,
    sendMode: string,
  },
  match: {
    params: {
      id: number
    }
  },
}

@connect(({ message_content }) => ({
  details: message_content.details
}))
class Details extends Component<Props, any> {

  state = {
    data: [],
    hasMsg: null
  };

  componentWillMount() {
    this.state.hasMsg = message.loading('');
  }

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'message_content/queryInfoById',
      payload: params.id
    }).then(() => {
      
      const { details } = this.props;
      if(+details.sendMode === 1){
        Keys[5] = { key: 'sendTime', name: '发布时间' }
      } else {
        Keys[5] = { key: 'timingSendTime', name: '定时发布时间' }
      }
      let data = [];
      if(details) {
        Keys.forEach(item => {
          data.push({
            name: item.name,
            value: item.key === 'positionNameList' && details['positionNameList'].length > 1 ? details['positionNameList'].join('、') : details[item.key]
          })
        });
      }
      this.setState({
        data
      }, this.state.hasMsg)
    })
  }

  render() {
    const { details } = this.props
    
    const DetailsOpen = DividerItem(  'icon-jigou', '查看详情')
    return (
      <>
        <DetailsOpen/>
        <Row style={{width: '90%', margin: '0 auto'}}> 
          <Col span={16}>
           <ListItem step={2}   data={ this.state.data }/>
          </Col>
          <Col style={{ height: '100%' }} span={8}>
            <Row>
              <Col span={8}  style={{
                 background: '#f0f6fa', 
                 fontSize: 15,
                 height: 151,
                 textAlign: 'center',
                 lineHeight: '151px'
                 }}>
                内容
              </Col>
              <Col span={16} style={{
                height: 151,
                fontSize: 15,
                padding: 10,
                border: '1px solid #eaeaea'
              }}>
                { details.content || ''}
              </Col>
            </Row>
          </Col>
        </Row> 
        <Button style={{left: '255px', position: 'fixed', bottom: '70px'}} onClick={ () => {
          window.history.back();
        } }>返回</Button>
      </>
    );
  }
}

export default Details;


